<template>
    <div class="edit-left-page">
        <div class="top-add-btn" @click="onAddCustomPageGroup">
            <el-icon><icon-folder-add /></el-icon>
            添加分组
        </div>
        
        <el-scrollbar height="100%">
            <el-menu
                :default-active="pageId"
                class="page-menu"
            >
                <!-- 自定义页面组 -->
                <template v-for="(item, index) in customPageData" :key="index">
                    <el-sub-menu :index="`customPage${index}`">
                        <template #title>
                            <div class="page-sub-menu-title">
                                <el-icon class="page-sub-menu__icon-arrow"><icon-arrow-down /></el-icon>
                                <el-icon><icon-folder /></el-icon>
                                <div :title="item.group" class="title-warp">
                                    {{ item.group }}
                                </div>
                                <div class="actions-warp">
                                    <el-icon title="添加页面" @click.stop="handleAddCustomPage(index)"><icon-document-add /></el-icon>
                                    <el-icon title="编辑组名" @click.stop="onEditCustomPageGroup(index)"><icon-setting /></el-icon>
                                    <el-icon title="删除分组" @click.stop="onRemoveCustomPageGroup(index)"><icon-delete /></el-icon>
                                </div>
                            </div>
                        </template>
                        <template v-for="(pageItem, pageIndex) in item.pages" :key="pageItem.router">
                            <el-menu-item :index="pageItem.router" @click="onSelectPage(pageItem)">
                                <div class="page-menu-item">
                                    <el-icon v-if="pageItem.router === homePageRouter" title="首页" class="title-tag"><icon-home /></el-icon>
                                    <div :title="pageItem.name" class="title-warp">
                                        {{ pageItem.name }}
                                    </div>
                                    <div class="actions-warp">
                                        <el-icon title="设置" @click.stop="onEditCustomPage(pageItem)"><icon-setting /></el-icon>
                                        <el-icon title="收藏" @click.stop="onCollectionCustomPage(pageItem)"><icon-star /></el-icon>
                                        <el-icon title="复制" @click.stop="onCloneCustomPage(index, pageItem)"><icon-copy /></el-icon>
                                        <el-icon title="删除" @click.stop="onRemoveCustomPage(index, pageIndex)"><icon-delete /></el-icon>
                                    </div>
                                </div>
                            </el-menu-item>
                        </template>
                        <div class="page-menu-add">
                            <div class="add-btn" @click="handleAddCustomPage(index)">
                                <el-icon title="添加页面"><icon-document-add /></el-icon>
                                添加页面
                            </div>
                        </div>
                    </el-sub-menu>
                </template>
            </el-menu>
        </el-scrollbar>

        <!-- <div class="bottom-add-btn">添加功能</div> -->
    </div>

    <page-setting ref="pageSettingRef" />
    <collection-template
        ref="collectionTemplateRef"
        title="收藏为单页模板"
        type="page"
    />
</template>

<script>
import { defineComponent, ref, computed, nextTick } from 'vue'
import { useEditStore } from '@/store'
import { ElMessageBox, ElMessage } from 'element-plus'
import usePage from '@/libs/edit/pageData'
import CollectionTemplate from '@/components/edit/collection-template'
import PageSetting from '@/components/edit/page-setting'
export default defineComponent({
    name: 'EditLeftPage',
    components: {
        CollectionTemplate,
        PageSetting
    },
    setup() {
        const editStore = useEditStore()

        const {
            appData,
            homePageRouter,
            pageId,
            customPageData,
            onSetPageId,
            onAddCustomPage,
            onDeleteCustomPageGroup,
            onCopyCustomPage,
            onDeleteCustomPage
        } = usePage()

        // 页面设置ref
        const pageSettingRef = ref(null)
        // 外链页面设置ref
        const webPageSettingRef = ref(null)
        // 功能页面设置ref
        const pluginPageSettingRef = ref(null)
        // 模块页面设置ref
        const modulePageSettingRef = ref(null)
        // 收藏页面ref
        const collectionTemplateRef = ref(null)

        const modulePageConfigs = computed({
            get: () => editStore.modulePageConfigs,
            set: val => editStore.modulePageConfigs = val
        })

        // 添加自定义页面分组
        const onAddCustomPageGroup = () => {
            ElMessageBox.prompt('请输入分组名称', '添加页面组', {
                inputValue: '页面分组',
                inputValidator: value => value !== '',
                inputErrorMessage: '页面分组名称不能为空'
            }).then(({ value }) => {
                customPageData.value.push({
                    group: value,
                    pages: []
                })
            }).catch(() => {})
        }
        // 编辑自定义页面分组
        const onEditCustomPageGroup = index => {
            const pageGroup = customPageData.value[index]
            ElMessageBox.prompt('请输入分组名称', '编辑页面组', {
                inputValue: pageGroup.group,
                inputValidator: value => value !== '',
                inputErrorMessage: '页面分组名称不能为空'
            }).then(({ value }) => {
                pageGroup.group = value
            }).catch(() => {})
        }
        // 删除自定义页面分组
        const onRemoveCustomPageGroup = index => {
            ElMessageBox.confirm('确定删除此分组?', '提示', {
                type: 'warning',
            }).then(() => {
                onDeleteCustomPageGroup(index)
            }).catch(() => {})
        }


        // 选中页面
        const onSelectPage = data => {
            // if (!appData.value[data.router] && (data.type !== 3)) {
            //     ElMessage({
            //         type: 'warning',
            //         message: '页面数据不存在'
            //     })
            //     return 
            // }
            // onSetPageId(data.router)
            const router = data.type === 3 ? data.code : data.router
            onSetPageId(router)
        }
        // 添加自定义页面
        const handleAddCustomPage = index => {
            onAddCustomPage(index)
            nextTick(() => {
                const pages = customPageData.value[index].pages
                onSetPageId(pages[pages.length - 1].router)
            })
        }
        // 编辑自定义页面
        const onEditCustomPage = pageItem => {
            if (!appData.value[pageItem.router]) {
                ElMessage({
                    type: 'warning',
                    message: '页面数据不存在'
                })
                return 
            }
            const { customFeature: pageConfig, eles: widgetList } = appData.value[pageItem.router]
            pageSettingRef.value.show({
                pageConfig,
                isHome: pageItem.router === homePageRouter.value
            }).then(data => {
                const { config, isHome } = data
                pageItem.name = config.name
                Object.assign(pageConfig, config)
                // 设置首页
                if (isHome) {
                    homePageRouter.value = pageItem.router
                } else {
                    if (homePageRouter.value === pageItem.router) homePageRouter.value = ''
                }
                // // 设置自定义导航栏控件标题
                // if (widgetList?.[0]?.eles?.type === 'custom-top-nav') {
                //     widgetList[0].eles.customFeature.title = config.name
                // }
            }).catch(() => {})
        }
        // 收藏自定义页面
        const onCollectionCustomPage = pageItem => {
            collectionTemplateRef.value.show({
                title: '',
                categoryId: '',
                cover: '',
                data: appData.value[pageItem.router],
                id: '',
                sort: 1
            }).then(() => {
                // console.log('成功')
            }).catch(() => {})
        }
        // 复制自定义页面
        const onCloneCustomPage = (pageGroupIndex, pageItem) => {
            onCopyCustomPage(pageGroupIndex, pageItem)
            nextTick(() => {
                const pages = customPageData.value[pageGroupIndex].pages
                onSetPageId(pages[pages.length - 1].router)
            })
        }
        // 删除自定义页面
        const onRemoveCustomPage = (pageGroupIndex, pageIndex) => {
            ElMessageBox.confirm('确定删除此页面?', '提示', {
                type: 'warning',
            }).then(() => {
                onDeleteCustomPage(pageGroupIndex, pageIndex)
            }).catch(() => {})
        }

        // 添加外链页面
        const handleAddWebPage = pages => {
            webPageSettingRef.value.show().then(data => {
                pages.push(data)
                ElMessage({
                    type: 'success',
                    message: '添加外链页面成功'
                })
            }).catch(() => {})
        }
        // 编辑外链页面
        const onEditWebPage = (pages, index) => {
            webPageSettingRef.value.show(pages[index]).then(data => {
                pages[index] = data
            }).catch(() => {})
        }
        // 删除外链页面
        const onRemoveWebPage = (pages, index) => {
            ElMessageBox.confirm('确定删除此页面?', '提示', {
                type: 'warning',
            }).then(() => {
                pages.splice(index, 1)
            }).catch(() => {})
        }

        // 添加功能页面
        const handleAddPluginPage = groupData => {
            pluginPageSettingRef.value.show(groupData.pages).then(data => {
                groupData.pages = data
                ElMessage({
                    type: 'success',
                    message: '添加功能成功'
                })
            }).catch(() => {})
        }
        // 删除功能页面
        const onRemovePluginPage = (pages, index) => {
            ElMessageBox.confirm('确定删除此功能页面?', '提示', {
                type: 'warning',
            }).then(() => {
                pages.splice(index, 1)
            }).catch(() => {})
        }

        // 添加模块页面
        const handleAddModulePage = groupData => {
            modulePageSettingRef.value.show(groupData.children).then(({ moduleData, modulePageData, moduleConfig }) => {
                groupData.children.forEach(item => {
                    // 找出需要删除的页面，模块页面对应的页面数据
                    if (moduleData.every(n => n.id !== item.id)) {
                        item?.pages?.forEach(page => {
                            delete appData.value[page.router]
                        })
                    }
                    // 对比version版本号，不一致则替换，一致则不替换
                    const findItem = moduleData.find(n => n.id === item.id)
                    if (findItem?.version === item?.version) {
                        item?.pages?.forEach(page => {
                            if (appData.value[page.router]) {
                                delete modulePageData[page.router]
                            }
                        })
                    }
                })
                groupData.children = moduleData
                modulePageConfigs.value = moduleConfig
                Object.assign(appData.value, modulePageData)
                ElMessage({
                    type: 'success',
                    message: '添加模块成功'
                })
            }).catch(() => {})
        }
        // 删除模块页面
        const onRemoveModulePage = (pages, index) => {
            ElMessageBox.confirm('确定删除此模块?', '提示', {
                type: 'warning',
            }).then(() => {
                pages[index]?.pages?.forEach(page => {
                    delete appData.value[page.router]
                    if (page.router === pageId.value) {
                        pageId.value = customPageData.value?.find(item => item.pages.length > 0)?.pages?.[0]?.router
                    }
                    if (page.router === homePageRouter.value) {
                        homePageRouter.value = customPageData.value?.find(item => item.pages.length > 0)?.pages?.[0]?.router
                    }
                    if (page.type === 3) {
                        delete modulePageConfigs.value[page.router]
                    }
                })
                pages.splice(index, 1)
            }).catch(() => {})
        }

        return {
            homePageRouter,
            pageId,
            customPageData,
            
            pageSettingRef,
            webPageSettingRef,
            pluginPageSettingRef,
            modulePageSettingRef,
            
            collectionTemplateRef,

            onAddCustomPageGroup,
            onEditCustomPageGroup,
            onRemoveCustomPageGroup,

            onSelectPage,
            handleAddCustomPage,
            onEditCustomPage,
            onCollectionCustomPage,
            onCloneCustomPage,
            onRemoveCustomPage,

            handleAddWebPage,
            onEditWebPage,
            onRemoveWebPage,

            handleAddPluginPage,
            onRemovePluginPage,

            handleAddModulePage,
            onRemoveModulePage
        }
    }
})
</script>

<style lang="less" scoped>
.el-sub-menu.is-opened > .el-sub-menu__title .page-sub-menu__icon-arrow {
    transform: rotateZ(180deg);
}
.el-sub-menu .page-sub-menu__icon-arrow {
    transition: transform 0.3s;
}

.edit-left-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background-color: var(--edit-custome-background-color-2);
    .top-add-btn {
        display: flex;
        align-items: center;
        height: 56px;
        line-height: 56px;
        padding: 0 10px 0 48px;
        background-color: var(--edit-bg-color);
        border-bottom: 1px solid var(--edit-border-color-light);
        box-sizing: border-box;
        cursor: pointer;
        .el-icon {
            margin-right: 5px;
            font-size: 15px;
        }
        &:hover {
            color: var(--edit-color-primary);
        }
    }
    .bottom-add-btn {
        width: 250px;
        height: 44px;
        line-height: 44px;
        font-size: 14px;
        color: var(--edit-color-white);
        text-align: center;
        margin: 10px auto;
        background-color: var(--edit-color-primary);
        box-sizing: border-box;
        cursor: pointer;
    }
    ::v-deep(.page-menu) {
        .el-sub-menu {
            & > .el-sub-menu__title {
                border-bottom: 1px solid var(--edit-border-color-light);
                .el-sub-menu__icon-arrow {
                    display: none;
                }
                &:hover {
                    .page-sub-menu-title .actions-warp {
                        display: block;
                    }
                }
                .page-sub-menu-title {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    position: relative;
                    & > .el-icon {
                        margin-right: 0;
                    }
                    .el-icon {
                        font-size: 15px;
                    }
                    .title-warp {
                        max-width: 100px;
                        overflow: hidden;
                        vertical-align: top;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .actions-warp {
                        position: absolute;
                        top: 0;
                        right: -10px;
                        display: none;
                        .el-icon {
                            margin: 0;
                            margin-left: 5px;
                            color: var(--edit-text-color-regular);
                            font-size: 16px;
                            &:hover {
                                color: var(--edit-color-primary);
                            }
                        }
                    }
                }
            }
        }
        .el-menu {
            background-color: var(--edit-custome-background-color-4);
            .el-menu-item {
                border-bottom: 1px solid var(--edit-border-color-light);
                &.is-active {
                    background-color: var(--edit-color-primary-light-8);
                }
                &.is-disabled {
                    opacity: 1;
                    cursor: default;
                }
                &:hover {
                    .page-menu-item .actions-warp {
                        display: block;
                    }
                }
                .page-menu-item {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    position: relative;
                    & > .el-icon {
                        margin-right: 0;
                    }
                    .el-icon {
                        font-size: 15px;
                    }
                    .title-tag {
                        position: absolute;
                        left: -24px;
                    }
                    .title-warp {
                        // max-width: 100px;
                        flex: 1;
                        overflow: hidden;
                        vertical-align: top;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        line-height: 1;
                        .title-txt {
                            line-height: 27px;
                        }
                        .desc-txt {
                            color: var(--edit-text-color-disabled);
                            font-size: 12px;
                        }
                    }
                    .actions-warp {
                        // position: absolute;
                        // top: 0;
                        // right: -10px;
                        display: none;
                        .el-icon {
                            margin: 0;
                            margin-left: 5px;
                            color: var(--edit-text-color-regular);
                            font-size: 16px;
                            &:hover {
                                color: var(--edit-color-primary);
                            }
                        }
                    }
                }
            }
            .page-menu-add {
                padding: 10px;
                .add-btn {
                    height: 44px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: var(--edit-text-color-secondary);
                    border: 1px dashed var(--edit-text-color-secondary);
                    cursor: pointer;
                    &:hover {
                        color: var(--edit-color-primary);
                        border-color: var(--edit-color-primary);
                    }
                    .el-icon {
                        font-size: 16px;
                        margin-right: 5px;
                    }
                }
            }
        }
    }
}
</style>